<template>
	<view class="act_detail">
	
		<!-- 参加活动按钮 -->
		<view class="attend">
			<view v-if="detailData.type == '线上' && !isregis  " @tap.stop="online_attend('/pages/circle/comps/Detail?id='+detailData.activable_id,detailData.activable_id)" hover-class="none" class="regis">立即参加</view>
			<view v-if="detailData.type == '线上' && isregis" @tap.stop="online_attend('/pages/circle/comps/Detail?id='+detailData.activable_id ,detailData.activable_id)" hover-class="none" class="offline_into_cir">进入圈子</view>
			<view v-if="detailData.type == '线下'" @tap="offline_attend('/pages/circle/comps/Detail?id='+detailData.activable_id ,detailData.activable_id)" hover-class="none" class="into_cir">进入圈子</view>
			<view v-if="detailData.type == '线下' && !isregis " @tap.stop="offline_attend('/pages/activity/comps/regisActivity?act_id='+detailData.id +'&cir_id=' +detailData.activable_id)" hover-class="none" class="offline_regis">立即报名</view>
			<view v-if="detailData.type == '线下' && isregis  " @tap.stop="cancelRegis" hover-class="none" class="cancel_regis">取消报名</view>
		</view>
		
		<view class="type-desc" v-if="detailData.type && detailData.images.length">
			<view class="online" v-if="detailData.type == '线上'">
				<image src="/static/images/icon/act_icon.png" mode="aspectFill"></image>线上活动
			</view>
			<view class="offline" v-else>
				<image src="/static/images/icon/act_icon.png" mode="aspectFill"></image>线下活动
			</view>
		</view>
		
		<view class="content" v-if="detailData && detailData.images.length">
			<view class="title" v-html="detailData.title"></view>
			<!--banner-->
			<swiper indicator-dots autoplay circular :interval="3000" :duration="300" indicator-color="rgba(0, 0, 0, 0.3)"
			 indicator-active-color="rgba(255, 255, 255, 0.3)" class="tui-banner-swiper">
				<swiper-item v-for="(item,index) in detailData.images" :key="index">
					<view class="tui-banner-title">{{item.title}}</view>
					<image :src="item" class="tui-slide-image" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<!--banner-->
			<view class="info">
				<view class="info_tip">活动信息</view>
				<!-- <view class="type">活动类型:{{detailData.type}}</view> -->
				<view class="max-regis" v-if="detailData.type == '线下'">最大报名人数:{{detailData.max_people}}</view>
				<view class="contact_people">联系人:   {{detailData.contact_person}}</view>
				<view class="phone" @tap="phoneCall(detailData.contact_number)">
					<view class="desc">
						联系电话:   {{detailData.contact_number}} 
					</view>
					<view class="phone_call">
						<image src="/static/images/icon/phone_icon.png" mode=""></image>
						<text class="call">拨打</text>
					</view>
				</view>
				<view class="address" v-if="detailData.type == '线下'">
					<view class="address_name">
						活动地址:{{detailData.location[0].name}}
					</view>
					<view class="navigation" @tap="openMap">
						<image src="/static/images/icon/navigation_icon.png" mode="aspectFill"></image>
						<text>导航</text>
					</view>
				</view>
				</view>
			<view class="time">
				<view class="t-desc" v-if="detailData.end_at" >活动时间</view>
				<view class="start">开始时间：{{detailData.start_at}}</view>	
				<view class="end">结束时间：{{detailData.end_at}}</view>
			</view>
			<view class="intro-desc">活动内容</view>
			<view class="intro-content" v-html="intro"></view>
		</view>
		
	</view>
</template>

<script>
	import api from '../../../common/api.js'
  export default {
	  data() {
			return {
				id:null,					//活动id
				detailData:[],		//活动详情数据
				isregis:false		,	//是否已报名
				latitude: '',			//经度
				longitude: '',		//维度		
				name:'',					//名称
				address:'',				//地址	
				covers: [
					{
						latitude: '',//纬度，范围为-90~90，负数表示南纬
						longitude: '',//经度，范围为-180~180，负数表示西经
					}
				]
		}
	},
	
	computed: {
		intro() {
			return this.detailData.allintro?this.detailData.allintro:this.detailData.intro
		}
	},
	
	async onLoad(p) {
		this.id = p.id
	},
	
	async onShow() {
		await	this.isAttendActivity(this.id)
		await this.getActDetail(this.id)
	},
	
	methods: {
		async getActDetail(id) {//获取活动详情数据
			this.detailData = await api.GetActDetail(id)
			if(this.detailData.type == '线下' && this.detailData.location.length ) {
				let location = this.detailData.location[0]
				this.latitude = location.latitude
				this.longitude = location.longitude
				this.name = location.name
				this.address = location.address
				this.covers[0].latitude = location.latitude
				this.covers[0].longitude = location.longitude
				console.log(this.latitude,this.longitude);
			}
		},
		
		async online_attend(url,cir_id) {//线上活动--报名
			let check = await api.IsJoinCir(cir_id)
			if(check.err == 1) {
				await api.JoinCir(cir_id)
			}
			let res = this.isregis?'':await api.AttendActivity(this.id)
			uni.showToast({
				title:res.msg,
				duration:1000
			})
			uni.navigateTo({
				url
			})
		},
		
		async isAttendActivity(actid) {// 判断是否已报名
			let res = await api.IsAttendActivity(actid)
			this.isregis = res.err == 1 ?  false : true 
		},
		
		async offline_attend(url,cir_id) {//线下活动-报名
			if(cir_id !== undefined) {
				let check = await api.IsJoinCir(cir_id)
				console.log(check);
				if(check.err == 1) {
					await api.JoinCir(cir_id)
				}
				await api.AttendActivity(this.id)
			}
			uni.navigateTo({
				url
			})
		},
		
		async cancelRegis() {//取消报名
			uni.showModal({
				title:'提示',
				content:'是否取消报名',
				success: res =>  {
					console.log(res);
					if(res.confirm) {
						this.cancel()
						console.log(res);
					}
				}
			})
		},
		
		async cancel() {//取消报名操作
			let check = await api.CancelRegisActivity(this.id)
			console.log('=======',check);
			this.isregis = false
			uni.showToast({
				title:check.msg,
				duration:800,
				
			})
		},
		
		openMap() {//调用地图api，进行导航
		 console.log('地图跳转');
			uni.openLocation({
				latitude: parseFloat(this.latitude),
				longitude: parseFloat(this.longitude),
				name: this.name,
				address: this.address,
				success: function () {
						console.log('success');
				}
			})
		},
		
		phoneCall(phone) {//调用手机拨号api
			uni.makePhoneCall({
				phoneNumber:phone
			})
		}
	},
	
	
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.act_detail {
	background-color: #fff;
}
.title {
	margin: 50rpx auto;
	font-size: 36rpx;
	text-align: center;
}
.info {
	line-height: 60rpx;
	color: #555;
	margin: 20rpx 0;
	font-size: 32rpx;
	.info_tip {
		color: #000000;
		font-size: 34rpx;
	}
	.address,.phone {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.address {
		.address_name {
			width: 400rpx;
			width: 600rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.navigation,.phone_call {
		width: 115rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44rpx;
		border-radius: 45rpx;
		border: 1rpx solid #fe0000;
		font-size: 30rpx;
		color: #fe0000;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 5rpx;
		}
	}
}
.type-desc {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		
		.online,.offline {
			font-size: 28rpx;
			width: 230rpx;
			position: absolute;
			top: 50rpx;
			left: -12px;
			display: flex;
			align-items: center;
			border-radius: 28rpx;
			height: 50rpx;
			color: #FFFFFF;
			image {
				width: 25rpx;
				height: 25rpx;
				margin: 0 10rpx 0 40rpx;
			}
		}
		.online {
			background-color: #ff827a;
		}
		.offline {
			background-color:#feb13d ;
		}
	}
.content {
	padding: 20rpx 37rpx;
	// height: 100vh;
	font-size: 32rpx;
	padding-bottom: 120rpx;
	
	.intro {
		line-height: 40rpx;
		font-size: 30rpx;
		margin-top: 14rpx;
		color: #555;
	}	
	.time {
		line-height: 50rpx;
		padding: 20rpx 0;
		font-size: 30rpx;
		.t-desc {
			font-size: 32rpx;
		}
		.start,.end {
			font-size: 30rpx;
			color: #555;
		}
	}
	.intro-desc {
		font-size: 32rpx;
	}
	.intro-content {
		font-size: 30rpx;
		color: #555;
	}
}
.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
}

.tui-swiper-item {
	display: flex;
	align-items: center;
}

.tui-hot-item {
	line-height: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tui-banner-swiper {
	
	width: 680rpx;
	// padding: 0 35rpx;
	height: 300rpx;
	position: relative;
}

.tui-slide-image {
	width: 100%;
	height: 300rpx;
	border-radius: 25rpx;
	display: block;
}

// .tui-banner-title {
// 	width: 100%;
// 	height: 100rpx;
// 	position: absolute;
// 	z-index: 9999;
// 	color: #fff;
// 	bottom: 0;
// 	padding: 0 30rpx;
// 	padding-top: 25rpx;
// 	font-size: 34rpx;
// 	font-weight: bold;
// 	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
// 	box-sizing: border-box;
// 	white-space: nowrap;
// 	overflow: hidden;
// 	text-overflow: ellipsis;
// }

/* #ifdef MP-WEIXIN  */
.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
	width: 100%;
	top: 280rpx;
	text-align: right;
	padding-right: 30rpx;
	box-sizing: border-box;
}

.tui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8rpx;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
	background: #5677fc;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 18rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>>.tui-banner-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
	width: 100%;
	top: 280rpx;
	text-align: right;
	padding-right: 30rpx;
	box-sizing: border-box;
}

>>>.tui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>>.tui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8rpx;
}

>>>.tui-banner-swiper .uni-swiper-dot-active::before {
	background: #5677fc;
}

>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 18rpx;
}

/* #endif */
.regis {
	bottom: 20rpx;
}
.attend {
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120rpx;
	background-color: #FFFFFF;
	z-index: 1;
	font-size: 28rpx;
	.into_cir {
		background-color: #07c160;
	}
	.cancel_regis {
		background-color: #838383;
	}
	.offline_regis {
		background: #0068ff;
	}
	.offline_regis,.into_cir,.cancel_regis {
		width: 250rpx;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx;
		color: #fff;
		border-radius: 40rpx;
	}
}
.regis,.offline_into_cir {
	display: flex;
	position: fixed;
	align-items: center;
	justify-content: center;
	width: 580rpx;
	left: 0;
	margin: auto;
	right: 0;
	
	
	height: 90rpx;
	border-radius: 40rpx;
	z-index: 1;
	background-color: #0068ff;
	color: #fff;
	font-size: 28rpx;
}
</style>
